<template>
  <van-popup v-model="blank" position="bottom">
    <div>
      <div class="van-picker__toolbar">
        <button type="button" class="van-picker__cancel" @click="onCancel">取消</button>
        <button type="button" class="van-picker__confirm" @click="onConfirm">确认</button>
      </div>
      <top-search v-model="search" bgcolor="#fff" @search="getList">
        <top-picker :option="option" v-model="type"></top-picker>
      </top-search>
      <div style="height: 2vh;"></div>
      <div style="height: 40vh; overflow: auto;">
        <radio-item v-for="item in list" :key="item.userId" :label="`${ item.nick }(${ item.phone })`" :tag="item.roleName" 
          :check="sele.userId == item.userId" @click.native="sele = item"></radio-item>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    role: {
      type: Array,
      default: () => [ 0, 1, 2, 3 ]
    }
  },
  data() {
    return {
      search: "",
      type: 0,
      option: [],
      list: [],
      sele: {}
    };
  },
  methods: {
    getList() {
      let page = 1, size = 10, vague = this.search;
      let roleType = this.type == 0 ? null : this.type;
      let userId = this.$store.state.userInfo.userId;
      this.$store.commit('loading', true);
      this.$axios.get('/api/roleController/getUserAllSubordinate', { 
        page, size, vague, roleType, userId, status: 0
      }).then(res => {
        this.$store.commit('loading');
        let json = res || {};      
        let list = json.list || [];
        list.forEach(ele => {
          ele.roleName = this.option.find(item => item.value == ele.roleType).label;
          if (ele.roleType == 1) {
            let fName = ele.pid == 10000 ? '一级' : '二级';
            ele.roleName = fName + ele.roleName;
          }
        });
        this.list = list;
      });
    },
    onConfirm() {
      if (this.sele.userId) {
        this.blank = false;
        this.$emit('submit', this.sele);
      } else {
        this.$toast('请选择人员');
      }
    },
    onCancel() {
      this.blank = false;
    },
    changeRole(role) {
      let option = [
        { label: '全部', value: 0 },
        { label: '代理', value: 1 },
        { label: '业务员', value: 2 },
        { label: '商户', value: 3 },
        { label: '服务商', value: 4 }
      ];
      this.option = option.filter(item => {
        return role.indexOf(item.value) > -1;
      });
      this.type = this.option[0].value;
    }
  },
  computed: {
    blank: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  mounted() {
    this.changeRole(this.role);
  }
};
</script>
